@charset "utf-8";
@import "reset";
$fs:64px;
html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem; 
}
//banner图制作
.banner{
    width: 100%;
    height: r(222px);
    margin-top: r(97px);
    position: relative;
    >img{width: 100%;}
    .about-wrap{
        width: r(305px);
        height: r(57px);
        background: #fff;
        position: absolute;
        left: r(29px);
        top: r(151px);
        .about-l{
            margin: r(16px) r(70px);
            font-size: r(26px);
            color: #b20000;
            line-height: r(27px);
        }
        .about-r{
            width: r(60px);
            height: r(50px);
            background: url(../img/left-j.png) no-repeat;
            background-size: r(21px) r(41px);
            background-position: center; 
            margin: r(3.5px) 0;
            border-left: r(1px) solid #b20000;
        }
    }
}
//banner图制作
section{
    width: r(583px);
    margin: 0 auto;
    .demo-wrap{
        margin-top: r(44px);
        border-bottom: r(1px) solid #cecece;
        padding-bottom: r(30px);
        .demo-f{
            width: r(210px);
            height: r(142px);
            >img{
                width: r(210px);
            }
        }
        .demo-r{
            width: r(360px);
            h2{
                font-size: r(22px);
                color: #000;
                font-weight: normal;
            }
            p{
                font-size: r(20px);
                color: #c5c5c5;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            p:nth-of-type(2){
                text-align: right;
                color: #939393;
                i{
                    vertical-align: middle;
                }
            }
        }
    }
}
